<template>
    <div>
        <div id="txt-d">{{name}}</div>
        <div id="txt-d">{{desc}}</div>
        
        <example :edata="edata[0]"><example0 slot="case"/></example>
        
        <example :edata="edata[1]"><example1 slot="case"/></example>
        
        <example :edata="edata[2]"><example2 slot="case"/></example>
        
        
        <div class='api' v-if="API">
          <div>API</div>
        <div v-if="API.props">{{name}} props</div>
        <div v-if="API.props" v-html="API_props"></div>
        <div v-if="API.events">{{name}} events</div>
        <div v-if="API.events" v-html="API_events"></div>
        <div v-if="API.slots">{{name}} slots</div>
        <div v-if="API.slots" v-html="API_slots"></div>
        <div v-if="API.options">{{name}} options</div>
        <div v-if="API.options" v-html="API_options"></div>
        </div>
        
    </div>
</template>
<script>
    
      import example0 from "./ex-alert.vue"
    
      import example1 from "./ex-confirm.vue"
    
      import example2 from "./ex-custom.vue"
    
    var API;
    
      API={"props":["property|desc|type|defaultValue"],"events":["eventName|desc|returnValue"],"slots":[" slotName|desc"],"options":["property|desc|type|defaultValue"]}
      for (const i in API) {
      if (API.hasOwnProperty(i)) {
        const p = API[i];
        const sp ='-|'
        switch (i) {
          case 'props':
            p.unshift(sp.repeat(4))
            p.unshift('属性|说明|类型|默认值')
            break;
          case 'events':
            p.unshift(sp.repeat(3))
            p.unshift('事件名|说明|返回值')
            break;
          case 'slots':
            p.unshift(sp.repeat(2))
            p.unshift('名称|说明')
            break;
          case 'options':
            p.unshift(sp.repeat(4))
            p.unshift('属性|说明|类型|默认值')
            break;
        }
      }
    }
    

    export default {
        data(){
            return {
                name:'alert',
                desc:'提醒，确认操作。',
                edata:[{"path":"./ex-alert.vue","title":"alert，提示对话框","readme":"%60App.alert('%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9%E3%80%82')%60%0A%20%20%0A%E8%BF%94%E5%9B%9E%60promise%60%0A%20%20%0A%E9%98%9F%E5%88%97%EF%BC%8C%E5%85%88%E8%BF%9B%E5%85%88%E5%87%BA"},{"path":"./ex-confirm.vue","title":"confirm，确认对话框","readme":"%E7%82%B9%E5%87%BB%E2%80%9C%E5%8F%96%E6%B6%88%E2%80%9D%EF%BC%8C%E6%89%A7%E8%A1%8C%60reject%60"},{"path":"./ex-custom.vue","title":"再次进化","readme":"%E6%94%AF%E6%8C%81%E6%8C%89%E9%92%AE%E8%87%AA%E5%AE%9A%E4%B9%89%E3%80%82"}],
                API:API
            }
        },
        computed:{
          API_props(){
            return marked(this.API.props.join('\n'))
          },
          API_events(){
            return marked(this.API.events.join('\n'))
          },
          API_slots(){
            return marked(this.API.slots.join('\n'))
          },
          API_options(){
            return marked(this.API.options.join('\n'))
          },
        },
        components:{
            
            example0,
            
            example1,
            
            example2,
            
        }
    }
</script>
<style>
#txt-d{
  font-size:25px;
  margin-left:10px;
}
</style>
